<template name="loginFormUpdatePassword">
  <div class="loginFormUpdatePassword">
    {{> React component }}
  </div>
</template>


<template name="loginFormChangePassword">

  <form class="login-form">

    {{> loginFormMessages messages=messages}}

    <div class="form-group {{hasError messages.errors.oldPassword}}">
      <label for="currentPassword_{{uniqueId}}" class="control-label" data-i18n="accountsUI.currentPassword">Current Password</label>
      <input id="currentPassword_{{uniqueId}}" class="form-control login-input--oldPassword" type="password" value="{{oldPassword}}">
      {{#if hasError messages.errors.oldPassword}}
        <span class="help-block">
          {{#each messages.errors.oldPassword}}
            <p>{{i18n i18nKeyReason reason}}</p>
          {{/each}}
        </span>
      {{/if}}
    </div>

    <div class="form-group {{hasError messages.errors.password }}">
      <label for="password_{{uniqueId}}" class="control-label" data-i18n="accountsUI.password">Password</label>
      <input id="password_{{uniqueId}}" class="form-control login-input--password" type="password" value="{{password}}">
      {{#if hasError messages.errors.password}}
        <span class="help-block">
          {{#each messages.errors.password}}
            <p>{{i18n i18nKeyReason reason}}</p>
          {{/each}}
        </span>
      {{/if}}
    </div>


    <div class="form-group">
      <button class="btn btn-primary action--submit" type="Submit" data-i18n="accountsUI.updatePasswordAndContinue" data-event-category="accounts" data-event-action="change-password">Update and continue</button>
      <button class="btn" type="button" data-i18n="app.cancel" data-event-category="accounts" data-event-action="change-password-cancel">Cancel</button>
    </div>

  </form>

</template>
